﻿<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>工作</title>


<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="shortcut icon"
	href="${pageContext.request.contextPath}/favicon.ico">
<!-- Animate.css -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/icomoon.css">
<!-- Bootstrap  -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style.css">

<!-- jQuery -->
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="${pageContext.request.contextPath}/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script
	src="${pageContext.request.contextPath}/js/jquery.waypoints.min.js"></script>

<!-- Main JS (Do not remove) -->
<script src="${pageContext.request.contextPath}/js/main.js"></script>


<!-- Modernizr JS -->
<script
	src="${pageContext.request.contextPath}/js/modernizr-2.6.2.min.js"></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
	<script src="../js/respond.min.js"></script>
	<![endif]-->
<style type="text/css">
#work .fh5co-grid {
	height: 325px;
	background-size: cover;
	margin-bottom: 30px;
	position: relative;
}

@media screen and (max-width: 480px) {
	#work .fh5co-grid {
		height: 400px;
	}
}

#work .fh5co-grid .image-popup {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background: rgba(255, 255, 255, 0.9);
	opacity: 0;
}

#work .fh5co-grid .image-popup .work-title {
	position: absolute;
	top: 50%;
	bottom: 20px;
	left: 20px;
	right: 20px;
	margin-top: -25px;
}

#work .fh5co-grid .image-popup .work-title span {
	color: gray;
	letter-spacing: 2px;
	font-size: 12px;
	text-transform: uppercase;
}

#work .fh5co-grid .image-popup .work-title h3 {
	margin-bottom: 10px;
}

#work .fh5co-grid:hover .image-popup {
	opacity: 0.7;
}

.logo {
	width: 50px;
	height: 50px;
}
</style>

</head>
<body>


	<script type="text/javascript">
		$(function() {
			$
					.ajax({
						url : "${pageContext.request.contextPath}/system/category/getAllCategory",
						type : "GET",
						dataType : "json",
						success : function(data) {

							$("#cd").empty();
							for ( var i = 0; i < data.length; i++) {
								var c = '<div class="col-md-4"><div class="fh5co-grid animate-box fadeInUp animated"  id="ss'
										+ i
										+ '" style="background-image: url(${pageContext.request.contextPath}'
										+ data[i].picture
										+ ');"><a class="image-popup text-center" href="${pageContext.request.contextPath}/system/category/getCategory?cid='
										+ data[i].cid
										+ '"><div class="work-title"><h3>'
										+ data[i].p_category
										+ '</h3></div></a></div></div>';
								var cate = '<a href="${pageContext.request.contextPath}/system/category/getCategory?cid='
										+ data[i].cid
										+ '">'
										+ data[i].p_category + '</a>';
								$("#cd").append(c);

							}
						},
						error : function() {
							alert("error");
						}
					});

		});
	</script>
	<div class="box-wrap">
		<header role="banner" id="fh5co-header">
			<div class="container">
				<nav class="navbar navbar-default">
					<div class="row">
						<div class="col-md-3">
							<div class="fh5co-navbar-brand">
								<a class="fh5co-logo"
									href="${pageContext.request.contextPath}/html/index.html">
									<img class="logo"
									src="${pageContext.request.contextPath}/images/logo.png"
									title="壁纸之家">
								</a>
							</div>
						</div>
						<div class="col-md-6">
							<ul class="nav text-center">
								<li><a
									href="${pageContext.request.contextPath}/system/news/toindex"><span>壁纸大全</span>
								</a>
								</li>
								<li><a
									href="${pageContext.request.contextPath}/system/news/toaddnews">壁纸添加</a>
								</li>
								<li class="active"><a
									href="${pageContext.request.contextPath}/system/news/toservice">壁纸分类</a>
								</li>
								<li><a
									href="${pageContext.request.contextPath}/system/news/tomynews">我的壁纸</a>
								</li>
							</ul>
						</div>
						<div class="col-md-3">
							<div class="fh5co-navbar-brand">
								<a href="${pageContext.request.contextPath}/system/user/tologin"
									title="登录"> LOGIN</a>
							</div>
						</div>
					</div>
				</nav>
			</div>
		</header>
		<!-- END: header -->
		<section id="work">
			<div class="container">
				<div class="row">
					<div
						class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 text-center">
						<div class="intro animate-box">
							<h2>更 多 精 美 壁 纸 尽 在 壁 纸 之 家</h2>
						</div>
					</div>
				</div>

				<div class="row" id="cd"></div>
				<div>
		</section>




		<footer id="footer" role="contentinfo">
			<div class="container">
				<div class="row">
					<div class="col-md-12 text-center">
						<div class="footer-widget border">
							<p class="pull-left">
								<small>&copy;The home of the wallpaper</small>
							</p>
							<p class="pull-right">
								<small> Designed by <a href="#">WSG</a> The home of the
									wallpaper <a href="#" target="_blank">壁纸之家</a> - Worth having</small>
							</p>

						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>
	<!-- END: box-wrap -->
</body>
</html>

